<template>
	<view>
		<ttBar title="点名记录" leftIcon="icon-back"></ttBar>
		<view class="rollList" v-if="dataList.length">
			<block v-for="(item,index) in dataList">
				<view class="rowItem">
					<view class="timeRow">
						<text class="date">[{{item.nyr}} {{weekFmt[item.week]}}]</text>
						<view class="status" :class="[workClass[item.status]]">{{workArr[item.status]}}</view>
					</view>
					<view class="infoRow">
						<view class="item">
							<text class="iconfont icon-shijian"></text>
							<text>{{item.begin}} ~ {{item.end}}</text>
						</view>
						<view class="item">
							<text class="iconfont icon-geren"></text>
							<text>{{item.teachers?item.teachers:''}}</text>
						</view>
						<view class="item">
							<text class="iconfont icon-lingdang"></text>
							<text>{{(item.status==1 || item.status==4)?1:0}}课次</text>
						</view>
					</view>
				</view>
			</block>
			
		</view>	
		<emptyBox v-if="!dataList.length"></emptyBox>
	</view>
</template>

<script>
	import TL from "../../common/tool.js";
	export default {
		data() {
			return {
				id:0,
				dataList:[],
				page_no:1,
				hasNext:true,
				weekFmt:['周日','周一','周二','周三','周四','周五','周六'],
				workArr:['','签到','请假','缺勤','补课'],
				workClass:['','','qingjia','','buke'],
			};
		},
		methods:{
			getData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetRollRecord",{
						page_no:this.page_no,
						page_size:10,
						orderId:parseInt(this.id)
						// orderId:886,
					}).then(res=>{
						this.dataList=this.dataList.concat(res.data.data.items);
						this.dataList.forEach(x=>{
							x.nyr=x.date.split('-')[1]+'月'+x.date.split('-')[2]+'日'
							x.week=TL.strToDate(x.date).getDay();
							if(x.teacherList.length){
								let _arr=[];
								x.teacherList.forEach(n=>{
									_arr.push(n.name);
								})
								x.teachers=_arr.join(',')
							}
						})
						this.hasNext=res.data.data.hasNext;
						this.page_no=res.data.data.nextPage;
						
					})
				}else{
					uni.showToast({
						title: '没有更多的数据了',
						icon: 'none'
					});
				}
				
			}
		},
		onLoad(cfm) {
			this.id=cfm.id
			this.getData()
		},
		// 页面滚动到底部
		onReachBottom() {
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.dataList=[];
				this.page_no=1;
				this.hasNext=true;
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.rollList{
		display: flex;
		flex-direction: column;
		border-top: 1px solid #f0f0f0;
		.rowItem{
			display: flex;
			flex-direction: column;
			padding: 32upx 50upx;
			border-bottom: 1px solid #f0f0f0;
			background-color: #FFFFFF;
			.timeRow{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40upx;
				.date{
					font-size: 32upx;
					color: #222222;
				}
				.status{
					font-size: 28upx;
					height: 40upx;
					line-height: 40upx;
					border-radius: 20upx;
					color: #FFFFFF;
					background-color: #ffb432;
					padding: 0 20upx;
				}
				.qingjia{
					background-color: #ff6e27;
				}
				.buke{
					background-color: #ffc12d;
				}
			}
			.infoRow{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					display: flex;
					align-items: center;
					
					text{
						font-size: 28upx;
						color: #9f9f9f;
					}
					.iconfont{
						color: #ffb432;
						font-size: 32upx;
						margin-right: 10upx;
					}
				}
			}
		}
	}
</style>
